<template>
	<view>
		<view class="income">
			<view class="z-flex-0 z-padding-b-24">
				<view class="back z-padding-l-32 tab-flex" :style="'padding-top:'+safeTop">
					<view @tap="cutTab(0)">
						<view :class="types == 0?'tab-title':'tab-text'">平台订单</view>
						<view v-if="types == 0" class="tab-wire z-margin-t-16"></view>
					</view>
					<view @tap="cutTab(1)" class="z-margin-l-48">
						<view :class="types == 1?'tab-title':'tab-text'">店铺订单</view>
						<view v-if="types == 1" class="tab-wire z-margin-t-16"></view>
					</view>
				</view>

				<view class="z-flex-c-s-b z-padding-lr-32 z-margin-t-32">
					<view class="income-time" @tap="selectDay">
						{{ date }}
						<image class="below-img" src="../../static/index/below.png"></image>
					</view>
					<view class="income-money">
						总结算金额：
						<text style="color: #ff9600">{{ sumPrice }}元</text>
					</view>
				</view>
			</view>
			<view class="main-box">
				<scroll-view class="scroll-box z-padding-t-24" scroll-y="true" :show-scrollbar="false" enhanced="true" @scrolltolower="more">
					<view class="item-box" v-for="(item,index) in list" @tap="detail(item.id)">
						<view class="z-margin-b-24 item-each">
							<view class="floor-1 z-flex-c-s-b z-padding-lr-32 z-padding-t-24">
								<view class="pica-t" @tap.stop="copy(item.orderId)">订单编号：{{ item.orderId }}</view>
								<view class="text_999 z-font-24" v-if="item.is_settle == 1">待结算</view>
								<view class="had z-font-24" v-else-if="item.is_settle == 2">已结算</view>
							</view>
							<!-- 项目 -->
							<view>
								<view class="z-padding-24 z-flex-c-s-b z-margin-t-24 items">
									<view class="z-flex">
										<image class="img-box z-margin-r-24" :src="cdn(item.orderDetail.image)" mode="aspectFill"></image>
										<view>
											<view class="item-title z-padding-b-24">{{ item.orderDetail.name }}</view>
											<text class="item-tab" v-if="item.orderDetail.sku_name">{{ item.orderDetail.sku_name }}</text>
										</view>
									</view>
									<view></view>
								</view>
							</view>
							<!-- 地址 -->
							<view>
								<view class="z-padding-t-32 z-padding-lr-32 server-text">
									<text class="text-b">服务完成时间：</text>
									{{ item.finishtime | date('yyyy-mm-dd hh:MM') }}
								</view>
							</view>
							<view class="z-margin-t-32 wire"></view>

							<view class="z-padding-tb-30 z-padding-lr-32 z-flex-c-s-b">
								<view class="base-r z-flex-1"></view>
								<view class="z-flex-c">
									<view>
										<text class="total z-font-22">总金额：</text>
										<text class="z-font-w z-font-22">￥</text>
										<text class="z-font-36 z-font-w">{{ item.payprice }}</text>
									</view>

									<view class="z-margin-l-32" v-if="item.is_settle == 2">
										<text class="total z-font-22">结算佣金：</text>
										<text class="unit z-font-22">￥</text>
										<text class="total-prices z-font-36">{{ item.rebatePrice }}</text>
									</view>
									<view class="z-margin-l-32" v-if="item.is_settle == 2">
										<text class="total z-font-22">结算车费：</text>
										<text class="unit z-font-22">￥</text>
										<text class="total-prices z-font-36">{{ item.act_travel_price }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-empty v-if="finish && list.length === 0" text="列表为空" mode="list"></u-empty>
					<!-- <van-empty description="暂无结算订单" v-if="{{finish && list.length === 0}}" /> -->
					<login v-if="!token" />
				</scroll-view>
			</view>
			<u-calendar
				color="#1677FF"
				:minDate="minDate"
				:maxDate="maxDate"
				class="calendar"
				:show="show"
				mode="range"
				@close="onClose"
				@confirm="onConfirm"
				monthNum="20"
			/>
		</view>
	</view>
</template>

<script>
import login from "@/component/login.vue"
export default {
	components:{
		login
	},
	data() {
		return {
			types: 0,
			starttime: '',
			endtime: '',
			list: [],
			finish: false,
			loading: false,
			page: 1,
			date: '',
			minDate: new Date(2023, 0, 1).getTime(),
			maxDate: new Date().getTime() + 86400000,
			show: false,
			sumPrice: '',
			token: uni.getStorageSync('token'),
			// #ifdef MP-WEIXIN
				safeTop:uni.getStorageSync('safeTop'),
				menuH:uni.getStorageSync('menuH')
			// #endif
		};
	},
	onLoad(options) {
		let currentDate = new Date(new Date().toLocaleDateString()).getTime(); // 获取当前日期
		let end = currentDate + 24 * 3600 * 1000 - 1000;
		let start = currentDate - 24 * 3600 * 1000 * 30;
		this.starttime = start / 1000,
		this.endtime = end / 1000,
		this.date = `${this.util.formatTime(start, 'yyyy/mm/dd')} - ${this.util.formatTime(end, 'yyyy/mm/dd')}`
	},
	onShow() {
		this.token = uni.getStorageSync('token')
		this.reload();
	},
	methods: {
		copy(event) {
			uni.setClipboardData({
				data: event,
				success(res) {
					this.util.toast('已复制');
				}
			});
		},
		detail(e) {
			this.util.skip('/pages/orderDetail/orderDetail?id=' + e);
		},
		onConfirm(event) {
			console.log(event)
			// const [start, end] = event.detail;
			const start = event[0];
			const end = event[event.length - 1];
			let starttime = new Date(start).getTime();
			let endtime = new Date(end).getTime();
			this.show = false,
			this.starttime = starttime,
			this.endtime = endtime,
			this.date = `${this.util.formatTime(starttime, 'yyyy/mm/dd')} - ${this.util.formatTime(endtime, 'yyyy/mm/dd')}`
			this.reload();
		},
		onClose() {
			this.show = false
		},
		selectDay() {
			this.show = true
		},
		cutTab(e) {
			this.types = e
			this.reload();
		},
		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},
		more() {
			this.page = ++this.page
			this.getList();
		},
		getList() {
			if (!uni.getStorageSync('token')) return;
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			let data = {
				page: this.page,
				types: this.types
			};
			if (this.starttime) {
				data['starttime'] = this.starttime;
			}
			if (this.endtime) {
				data['endtime'] = this.endtime;
			}
			this.http.get('order/skillsettleorder', data).then((res) => {
					if (res.data.list.length === 0) {
						this.finish = true
					}
					let arr = this.list.concat(res.data.list);
					this.list = arr,
					this.sumPrice = res.data.sumPrice
				})
				.finally((res) => {
					this.loading = false
				});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}
.income {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 100rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.main-box {
	flex: 1;
	overflow: hidden;
}
.scroll-box {
	height: 100%;
	box-sizing: border-box;
}
.back {
	background-color: #fff;
}
.tab-wire {
	width: 160rpx;
	height: 6rpx;
	background: #1677ff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}
.tab-flex {
	display: flex;
	align-items: center;
}
.tab-title {
	font-size: 40rpx;
	font-weight: 800;
	color: #203460;
}
.tab-text {
	font-size: 24rpx;
	font-weight: 500;
	color: #a4a9b7;
}

.income-time {
	font-size: 22rpx;
	font-weight: bold;
	color: #1c274c;
}
.income-money {
	font-size: 22rpx;
	font-weight: 500;
	color: #a4a9b7;
}
.below-img {
	width: 22rpx;
	height: 22rpx;
}
.item-box {
	width: 686rpx;
	/* height: 701rpx; */
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}
.pica-t {
	font-size: 24rpx;
	font-weight: 500;
	color: #a4a9b7;
}

.had {
	color: FF9600;
}

.after-sale {
	font-size: 24rpx;
	font-weight: 500;
	color: #1c274c;
}
.t-red {
	font-size: 24rpx;
	font-weight: 500;
	color: #ff2121;
}
.items {
	width: 574rpx;
	height: 120rpx;
	background: #f5f7f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}
.img-box {
	width: 120rpx;
	height: 120rpx;
	background: #d9d9d9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}
.item-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}
.item-tab {
	font-size: 22rpx;
	font-weight: 500;
	color: #a4a9b7;
	background-color: #ffffff;
	padding: 5rpx 12rpx;
}
.server-text {
	font-size: 22rpx;
	font-weight: bold;
	color: #a4a9b7;
}
.text-b {
	color: #1c274c;
}
.wire {
	width: 622rpx;
	height: 0rpx;
	opacity: 1;
	border: 1rpx solid rgba(164, 169, 183, 0.2);
	margin: auto;
}
.total {
	color: #a4a9b7;
}
.unit {
	color: #ff9600;
}
.total-prices {
	color: #ff9600;
	font-weight: bold;
}
</style>
